import React, {useState, useEffect} from 'react'
import { Popup, Toast } from 'react-vant'
import { WapNav } from '@react-vant/icons';
import Player from 'xgplayer'
import copy from 'copy-to-clipboard';
import 'xgplayer/dist/index.min.css'
import './styles/index.less'
const Home = (props) => {
  const [visible, setVisible] = useState(false)

  const { navigate } = props

  useEffect(() => {
    console.log(props)
    new Player({
      width: '100%',
      height: 216,
      el: document.querySelector('.banner'),
      playbackRate: false,
      url: `https://www.nanaplay.net/video/${props.state.videoName}`
    });
  }, [])

  const onClose = () => {
    setVisible(false)
  }

  const { listGoods, myLevel, address } = props.state

  return (
    <>
      <div className="home">
        <div className="header">
          <div className="user">
            <div className="avatar"></div>
            <div className="name">
              <span>{props.formatAddress(address)}</span>
              <button className="copy-btn" onClick={() => {
                copy(address)
                Toast.success('复制成功')
              }}>复制</button>
            </div>
          </div>
          <WapNav fontSize="28px" color="#FFF" onClick={() => setVisible(true)} />
        </div>
        <div className="banner"></div>
        <div className="title">认购商品</div>
        <div className="list">
          {
            listGoods.map(item => (
              <div className="item" onClick={() => props.navigate(`/order/confirm?id=${item.id}`)}>
                <div className="item-cover" style={{background: `url('https://www.nanaplay.net/pic/${item.picName}') no-repeat`, backgroundSize: '100% auto'}}></div>
                <div className="item-title">{item.name}</div>
                <div className="item-detail">{item.detail}</div>
                <div className="item-price">${item.amount}</div>
              </div>
            ))
          }
        </div>
      </div>
      <Popup
        visible={visible}
        style={{ width: '200px', height: '100%' }}
        position="right"
        onClose={onClose}
      >
        <div className="sidebar-menu">
          <div className="sidebar-menu-header">
            <i className="menu-avatar"></i>
            <div className="user-info">
              <div className="user-address">{props.formatAddress(address)}</div>
            </div>
          </div>
          <ul className="sidebar-menu-list">
            <li onClick={() => props.navigate('/node')}>
              <i></i>
              <span>节点认购</span>
            </li>
            <li onClick={() => props.navigate('/recharge')}>
              <i></i>
              <span>充值</span>
            </li>
            <li onClick={() => props.navigate('/exchange')}>
              <i></i>
              <span>兑换</span>
            </li>
            <li onClick={() => props.navigate('/shopping')}>
              <i></i>
              <span>购物专区</span>
            </li>
            <li onClick={() => props.navigate('/order')}>
              <i></i>
              <span>我的订单</span>
            </li>
            <li onClick={() => props.navigate('/team')}>
              <i></i>
              <span>我的团队</span>
            </li>
            <li onClick={() => props.navigate('/my')}>
              <i></i>
              <span>个人中心</span>
            </li>
            <li onClick={() => props.navigate('/detail')}>
              <i></i>
              <span>认购详情</span>
            </li>
            <li onClick={() => props.navigate(`/shopping`)}>
              <i></i>
              <span>复投</span>
            </li>
          </ul>
        </div>
      </Popup>
    </>
  )
}

export default Home;